<!-- demo3 -->
<template>
  <div class="chart-box" :style="styObj">
    <div class="process-box">
      <div class="center-mask"></div>
    </div>
    <!-- 插槽内容 -->
    <div class="slot-content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    rate: {
      type: Number,
      default: 0,
    },
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    styObj() {
      let rate = 0;
      if (this.rate <= 0) {
        rate = 0;
      } else if (this.rate >= 1) {
        rate = 1;
      } else {
        rate = this.rate;
      }
      let endPos = `${rate * 100}%`;
      let obj = Object.assign({}, this.defaultConfig, this.config);
      let rotate = `rotate(${360 * rate}deg)`;
      let chartRotate = obj.clockwise ? "rotateY(0deg)" : "rotateY(180deg)";
      let bgInfo = [];
      let gap = 100 / obj.gapNum;
      for (let i = 0; i < obj.gapNum; i++) {
        bgInfo.push(`#fff ${i * gap}%`);
        bgInfo.push(`#fff ${i * gap + obj.lineWidth}%`);
        bgInfo.push(`transparent ${i * gap + obj.lineWidth}%`);
        bgInfo.push(`transparent ${(i + 1) * gap}%`);
      }
      return {
        "--background-image": `conic-gradient(${bgInfo.join(",")})`,
        "--background-image1": `conic-gradient(${obj.startColor} 0%, ${obj.endColor} ${endPos}, transparent ${endPos})`,
        "--border-width": obj.borderWidth,
        "--background-color": obj.borderBackground,
        "--center-gap-bg": obj.centerCircleBg,
        "--clockwise-wise": chartRotate,
      };
    },
  },
  data() {
    return {
      /* 此配置下所有属性均可在config中进行覆盖，实现个性化配置 */
      defaultConfig: {
        borderWidth: "8px", // 描边宽度
        borderBackground: "#eee", // 描边背景颜色
        startColor: "#d5f4ee", // 进度条起始颜色
        endColor: "#2ec4a7", // 进度条结束颜色
        centerCircleBg: "transparent", // 中间空心圆背景
        clockwise: true, // 是否顺时针
        gapNum: 10, // 分割段数
        lineWidth: 2, // 间隔线宽度，百分比
      },
    };
  },
};
</script>
<style scoped>
.chart-box {
  position: relative;
  width: 100%;
  height: 100%;
}
.process-box {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: var(--border-width);
  box-sizing: border-box;
  background-color: var(--background-color);
  background-image: var(--background-image), var(--background-image1);
  transform: var(--clockwise-wise);
}
.center-mask {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--center-gap-bg);
}
/* 插槽内容样式 */
.slot-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
